<!-- 最近播放 -->
<template>
	<view>
		<view class="body" v-if="RecentPlays.length!==0">
			<view class="body-top">
				<image src="../../static/RecentPlays/视频.png"></image>
				<text id="big-text">播放全部</text>
				<text id="small-text">（12）</text>
			</view>
			<view class="body-items">
				<SongItem v-for="(item,index) in RecommendSongSheetList" :key="item.id" style="width: 100%;"
					:name="item.name" :artists="item.ar[0].name" :album="item.al.name" :index="index"
					:data="RecommendSongSheetList">
				</SongItem>
			</view>
		</view>
		<view class="tips" v-else>
			<text>暂无播放记录</text>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {

			};
		},
		methods: {
			...mapActions('RecentPlays', ['GetRecentPlays'])
		},
		onLoad() {
			this.GetRecentPlays()
		},
		computed: {
			...mapState('RecentPlays', ['RecentPlays'])
		}
	}
</script>

<style lang="scss">
	.body {
		.body-top {
			height: 80rpx;
			display: flex;
			align-items: center;

			image {
				height: 40rpx;
				width: 40rpx;
				margin-right: 30rpx;
			}

			#big-text {
				opacity: 0.8;
			}

			#small-text {
				opacity: 0.6;
				font-size: 20rpx;
			}
		}
	}

	.tips{
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
		opacity: 0.8;
	}
</style>
